<template>
  <view class="detail-container">
    <view class="detail-header">
      <text class="detail-name">{{ selectedGood.name }}</text>
    </view>
    <view class="detail-image">
      <el-image :src="selectedGood.image" fit="cover" class="image"></el-image>
    </view>
    <view class="detail-content">
      <view class="price">
        <text class="price-label">价格：</text>
        <text class="price-value">￥{{ selectedGood.price }}</text>
      </view>
      <view class="description">
        <text class="description-label">商品描述：</text>
        <text class="description-value">{{ selectedGood.description }}</text>
      </view>
      <view class="specs">
        <text class="specs-label">规格：</text>
        <text class="specs-value">口味：{{ selectedGood.specs.find(spec => spec.key === '口味')?.value }}</text>
      </view>
      <view class="specs">
        <text class="specs-value">重量：{{ selectedGood.specs.find(spec => spec.key === '重量')?.value }}</text>
      </view>
      <view class="specs">
        <text class="specs-value">保质期：{{ selectedGood.specs.find(spec => spec.key === '保质期')?.value }}</text>
      </view>
      <view class="specs">
        <text class="specs-value">产地：{{ selectedGood.specs.find(spec => spec.key === '产地')?.value }}</text>
      </view>
    </view>
    <view class="reviews">
      <view class="reviews-header">
        <text class="reviews-label">用户评价：</text>
      </view>
      <view class="review-item" v-for="(review, index) in selectedGood.reviews.sample" :key="index">
        <text class="review-text">{{ review }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedGood: {}, // 用于存储当前商品的详细信息
    goodsList: [
      {
        id: 1,
        name: "经典裹蒸粽（豆沙粽）",
        image: "https://img.alicdn.com/bao/uploaded/i4/2485526940/O1CN01jZekDa218ZRBoNyyB_!!0-item_pic.jpg",
        price: 25.00,
        original_price: 30.00,
        discount: "8.3折",
        stock: {
          quantity: 200,
          status: "有货"
        },
        description: "精选优质糯米，搭配细腻豆沙馅，口感软糯，甜而不腻。传统手工制作，保留了粽子的原始风味。",
        specs: [
          { key: "口味", value: "豆沙" },
          { key: "重量", value: "50g/个" },
          { key: "包装", value: "真空包装" },
          { key: "保质期", value: "6个月" },
          { key: "产地", value: "广东肇庆" }
        ],
        reviews: {
          total: 500,
          good_rate: 95.0,
          sample: ["粽子口感很好，豆沙馅很甜！", "包装很严实，粽子很新鲜。"]
        },
        brand: "传统美食坊",
        category: "食品>粽子"
      },
      {
        id: 2,
        name: "五香裹蒸粽（咸肉粽）",
        image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.ZDq4xjD-6EIUpLK92KEPVwHaHa?cb=iwc2&rs=1&pid=ImgDetMain",
        price: 30.00,
        original_price: 35.00,
        discount: "8.6折",
        stock: {
          quantity: 150,
          status: "有货"
        },
        description: "采用优质糯米和精选五花肉，搭配香菇、咸蛋黄等配料，经过传统工艺制作，肉香浓郁，口感丰富。",
        specs: [
          { key: "口味", value: "咸肉" },
          { key: "重量", value: "60g/个" },
          { key: "包装", value: "真空包装" },
          { key: "保质期", value: "6个月" },
          { key: "产地", value: "广东肇庆" }
        ],
        reviews: {
          total: 400,
          good_rate: 94.0,
          sample: ["咸肉粽很好吃，肉很香！", "粽子的口感很扎实，配料丰富。"]
        },
        brand: "传统美食坊",
        category: "食品>粽子"
      },
      {
        id: 3,
        name: "裹蒸粽（碱水粽）",
        image: "https://img.alicdn.com/i3/2206460867747/O1CN01UK4MiC276B2Xz85qJ_!!2206460867747.jpg",
        price: 20.00,
        original_price: 25.00,
        discount: "8.0折",
        stock: {
          quantity: 300,
          status: "有货"
        },
        description: "碱水粽是广东特色粽子，采用糯米和食用碱水制作，口感软糯，带有独特的碱水香味，适合搭配糖水食用。",
        specs: [
          { key: "口味", value: "碱水" },
          { key: "重量", value: "45g/个" },
          { key: "包装", value: "真空包装" },
          { key: "保质期", value: "5个月" },
          { key: "产地", value: "广东肇庆" }
        ],
        reviews: {
          total: 300,
          good_rate: 96.0,
          sample: ["碱水粽很有特色，味道很好！", "适合搭配糖水一起吃。"]
        },
        brand: "传统美食坊",
        category: "食品>粽子"
      },
      {
        id: 4,
        name: "裹蒸粽（八宝粽）",
        image: "https://pic.nximg.cn/file/20220104/9852054_164240977100_2.jpg",
        price: 35.00,
        original_price: 40.00,
        discount: "8.8折",
        stock: {
          quantity: 100,
          status: "有货"
        },
        description: "八宝粽是传统粽子的升级版，内含花生、红豆、绿豆、薏仁、莲子等多种食材，营养丰富，口感层次分明。",
        specs: [
          { key: "口味", value: "八宝" },
          { key: "重量", value: "70g/个" },
          { key: "包装", value: "真空包装" },
          { key: "保质期", value: "6个月" },
          { key: "产地", value: "广东肇庆" }
        ],
        reviews: {
          total: 200,
          good_rate: 97.0,
          sample: ["八宝粽的配料很丰富，很好吃！", "口感很扎实，食材新鲜。"]
        },
        brand: "传统美食坊",
        category: "食品>粽子"
      },
      {
        id: 5,
        name: "裹蒸粽（蛋黄肉粽）",
        image: "https://img.alicdn.com/bao/uploaded/i1/2200667102488/O1CN01vVMHMt1UFYGH5MI4J_!!0-item_pic.jpg_500x500q90.jpg",
        price: 32.00,
        original_price: 38.00,
        discount: "8.4折",
        stock: {
          quantity: 120,
          status: "有货"
        },
        description: "蛋黄肉粽是经典口味之一，采用优质糯米、咸蛋黄和五花肉，搭配香菇、花生等配料，口感丰富，咸香适口。",
        specs: [
          { key: "口味", value: "蛋黄肉" },
          { key: "重量", value: "65g/个" },
          { key: "包装", value: "真空包装" },
          { key: "保质期", value: "6个月" },
          { key: "产地", value: "广东肇庆" }
        ],
        reviews: {
          total: 250,
          good_rate: 95.5,
          sample: ["蛋黄肉粽很好吃，蛋黄很香！", "粽子的口感很扎实，配料丰富。"]
        },
        brand: "传统美食坊",
        category: "食品>粽子"
      }
    ],
    };
  },
  onLoad(options) {
    // 从页面参数中获取商品 ID
    const goodId = options.id;
    // 根据 ID 查找商品详情
    this.selectedGood = this.goodsList.find(good => good.id == goodId) || {};
  }
};
</script>

<style scoped>
.detail-container {
  padding: 10px;
}
.detail-header {
  margin-bottom: 10px;
}
.detail-name {
  font-size: 20px;
  font-weight: bold;
}
.detail-image {
  margin-bottom: 10px;
}
.image {
  width: 100%;
  object-fit: cover;
}
.detail-content {
  margin-bottom: 10px;
}
.price {
  font-size: 18px;
  color: red;
  margin-bottom: 5px;
}
.price-label {
  font-size: 16px;
  color: #666;
}
.description {
  margin-bottom: 5px;
}
.description-label {
  font-size: 16px;
  color: #666;
}
.specs {
  margin-bottom: 5px;
}
.specs-label {
  font-size: 16px;
  color: #666;
}
.reviews {
  margin-top: 10px;
}
.reviews-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}
.review-item {
  margin-bottom: 5px;
}
.review-text {
  font-size: 14px;
  color: #666;
}
</style>